<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            border: 10px solid red;
            /* 父元素的高度塌陷解决 */
            /* 
                 height: 120px; 给父元素设置固定的高度,高度写死了，这种做法不适用于大多数，所以没有解决实际问题；
                  开启BFC的特点：
                    - 开启BFC的元素不会被浮动元素所覆盖；
                    - 开启BFC元素的子元素和父元素的外边距不会重叠
                    - 开启BFC元素的父元素会包裹着子元素

                 开启BFC block formatting context 块级格式化环境,开启后，bfc内部是一个布局一个计算方法，外部是一个布局，一个计算方法；
                    给父元素 float: left; 副作用：右边的边框没有了;
                    给父元素 display: inline-block;副作用：右边的边框没有了;
                    父元素 overflow: auto; or overflow: hidden; 好像没啥副作用；

            */
            overflow: hidden;
            /* display: inline-block; */
            /* clear: left;
              left  清除浮动对左侧的影响；right 右侧影响
              both 清楚浮动最大侧的影响
            */

            /* clear: left; */


        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* border: 10px solid red; */
            padding: 10px;
            float: left;
            /* 父元素的高度塌陷 */
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>